<template>
  <view class="container">
    <view class="water_top">
      <view v-for="(item, index) in chooseList" :key="index" :class="chooseIndex == index ? 'active' : ''" @click="choose(index)">{{ item }}</view>
    </view>
    <view class="water_bot">
      <view class="charts-box">
        <qiun-data-charts v-if="isChart"  type="area" :opts="opts" :chartData="chartData" :ontouch="true" />
      </view>
    </view>
    <view class="regimen">
      <view class="topTitle">
        <div class="topTitle_left"></div>
        <div class="topTitle_right">水情信息</div>
      </view>
      <view class="regimenBox boxshow">
        <view class="regimen_top">
          <view class="regimen_txt">
            <text>水位：</text>
            <view>{{ waterInfo.rz || 0 }}</view>
            <text>m</text>
          </view>
          <view class="regimen_txt">
            <text>入库流量：</text>
            <view>{{ waterInfo.inq || 0 }}</view>
            <text>m³/s</text>
          </view>
          <view class="regimen_txt">
            <text>库容：</text>
            <view>{{ waterInfo.w || 0 }}</view>
            <text>m³</text>
          </view>
        </view>
        <view class="regimen_bot">
          <view class="regimen_bot_box">
            <image src="/static/images/index/ico_regimen1.png" alt="">
            <view class="regimen_num">{{ Number(raininfo.rainFall || 0).toFixed(2) }}</view>
            <view class="regimen_name">距汛限纳雨量（mm）</view>
          </view>
          <view class="regimen_bot_box">
            <image src="/static/images/index/ico_regimen2.png" alt="">
            <view class="regimen_num">{{ Number(raininfo.drp24 || 0).toFixed(2) }}</view>
            <view class="regimen_name">24h降雨<br />（mm）</view>
          </view>
          <view class="regimen_bot_box">
            <image src="/static/images/index/ico_regimen3.png" alt="">
            <view class="regimen_num">{{ Number(raininfo.drp72 || 0).toFixed(2) }}</view>
            <view class="regimen_name">三天降雨<br />（mm）</view>
          </view>
          <view class="regimen_bot_box">
            <image src="/static/images/index/ico_regimen4.png" alt="">
            <view class="regimen_num">{{ Number(raininfo.sumQc || 0).toFixed(2) }}</view>
            <view class="regimen_name">三天来水<br />（万m³）</view>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
  import dayjs from '@/utlis/dayjs.min';
  
  export default {
    data() {
      return {
        chooseList: ['今日', '本周', '本月'],
        chooseIndex: 0,
        isChart: false,
        opts: {
          color: ["#5D8FF6"],
          padding: [15,15,5,10],
          enableScroll: false,
          dataPointShape: false,
          legend: {
            show: false,
          },
          xAxis: {
            disableGrid: true,
            fontColor: '#808080',
            axisLineColor: '#808080',
            fontSize: 12,
            scrollShow: false,
            itemCount: 5
          },
          yAxis: {
            showTitle: true,
            gridType: "dash",
            dashLength: 2,
            gridColor: '#E6E6E6',
            data: [{
              title: "m",
              fontColor: '#808080',
              axisLineColor: '#808080',
              fontSize: 12,
              min: 10,
              max: 20
            }]
          },
          extra: {
            area: {
              type: "curve",
              opacity: 0.9,
              addLine: true,
              width: 2,
              gradient: true,
              activeType: "hollow"
            }
          }
        },
        chartData: {},
        waterInfo: {},
        raininfo: {},
      }
    },
    onLoad(options) {
      this.getWater()
      this.getWaters()
      this.getRains()
    },
    onShow() {},
    methods: {
      // 获取chart信息
      getWater() {
        let temp = {
          stcd: "41815480",
        }
        if(this.chooseIndex == 0) {
          temp.startTime = dayjs().format('YYYY-MM-DD') + ' 00:00:00'
          temp.endTime = dayjs().format('YYYY-MM-DD') + '  23:59:59'
        } else if(this.chooseIndex == 1) {
          temp.startTime = dayjs().startOf("week").add(1, "day").format('YYYY-MM-DD') + ' 00:00:00'
          temp.endTime = dayjs().endOf("week").add(1, "day").format('YYYY-MM-DD') + '  23:59:59'
        } else if(this.chooseIndex == 2) {
          temp.startTime = dayjs().startOf("month").format('YYYY-MM-DD') + ' 00:00:00'
          temp.endTime = dayjs().endOf("month").format('YYYY-MM-DD') + '  23:59:59'
        }
        let xdata = []
        let sdata = []
        this.$request.hisRealInfo(temp).then(res => {
          let list = res.data || []
          this.isChart = true
          var chunkSize = Math.ceil(list.length / 6)
          for (var i = 0; i < list.length; i += chunkSize) {
            xdata.push((list[i].tm).substring(6, 10) || '0')
            sdata.push(list[i].rz || '0')
          }
          // list.forEach(v => {
          //   xdata.push(v.tm || '0')
          //   sdata.push(v.rz || '0')
          // })

          let chart = {
            categories: xdata,
            series: [
              {
                name: "水位",
                data: sdata,
              },
            ]
          };
          this.chartData = JSON.parse(JSON.stringify(chart));
        })
      },
      choose(index) {
        this.chooseIndex = index
        this.isChart = false
        this.getWater()
      },
      // 水情监测
      getWaters() {
        this.$request.getrealInfo({ stcd: '41815480' }).then(res => {
          this.waterInfo = res.data || {}
        })
      },
      //  距汛限纳雨量  24h降雨  三天降雨 三天来水
      getRains() {
        uni.request({
          url: 'http://whswszls1.weihai.cn/fapi/v1/result/getForecastResult', //仅为示例，并非真实接口地址。
          data: {
            stcd: '41815480',
            startTime: dayjs().format('YYYY-MM-DD HH') + ':00:00'
          },
          success: (res) => {
            this.raininfo = res.data.data || {}
          },
          fail: (err) => {
            this.raininfo = {}
          }
        });
      },
    },
  }
</script>

<style lang="scss" scoped>
  .water_top {
    padding: 25rpx 0;
    display: flex;
    align-items: center;
    justify-content: space-evenly;

    view {
      font-size: 30rpx;
      line-height: 30rpx;
      padding: 10rpx 40rpx;
      border-radius: 30rpx;
      background-color: #f6f6f6;
      color: #838383;

      &.active {
        color: #fff;
        background-color: #458EFB;
        border-color: #458EFB;
      }
    }
  }

  .water_bot {
    .charts-box {
      width: 100%;
      height: 400rpx;
    }
  }

  .topTitle {
    display: flex;
    align-items: center;

    .topTitle_left {
      width: 8rpx;
      height: 28rpx;
      background: #0D91FF;
    }

    .topTitle_right {
      font-size: 32rpx;
      font-weight: bold;
      color: #0D91FF;
      margin-left: 13rpx;
    }
  }

  .regimen {
    padding: 0 25rpx;
    margin-top: 50rpx;

    .regimenBox {
      margin-top: 10rpx;
      background-color: #fff;
      border-radius: 10rpx;
    }
    
    .regimen_top {
      width: 100%;
      text-align: center;
      display: flex;
      align-items: center;
      justify-content: space-evenly;
      padding-top: 20rpx;

      .regimen_txt {
        display: flex;
        align-items: center;
        font-size: 24rpx;
        color: rgba($color: #000000, $alpha: .5);

        view {
          color: #0D91FF;
          padding-left: 15rpx;
          padding-right: 10rpx;
        }
      }
    }

    .regimen_bot {
      padding: 12rpx 25rpx 20rpx;
      display: flex;
      align-items: center;
      justify-content: space-between;

      &_box {
        max-width: 25%;
        text-align: center;

        image {
          width: 108rpx;
          height: 108rpx;
        }

        .regimen_num {
          font-size: 28rpx;
          font-weight: bold;
          color: #0D91FF;
          line-height: 28rpx;
          margin-top: -10rpx;
          padding-bottom: 10rpx;
        }

        .regimen_name {
          font-size: 25rpx;
          color: #716F6F;
          line-height: 25rpx;
          padding-top: 6rpx;
        }
      }
    }
  }
</style>
